iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
自我挑戰組

從新手開始TypeScript系列 第 23

Day23-TypeScript(TS)函式(Function)的選擇性參數(Optional Parameter)

  • 分享至 

  • xImage
  •  

今天要來介紹TypeScript(TS)函式(Function)的選擇性參數(Optional Parameter)
這時我們就要來複習一下啦,
在Day12基礎用法中有提到過選擇性屬性(Optional Properties)(Day12-TypeScript(TS)的選擇性屬性(Optional Properties))
那麼今天要講的跟之前的觀念是一樣的喔,
只是把函式內的參數加上了選擇性屬性就會變成選擇性參數了,
概念很容易理解吧,
那我們來看看範例說明,

首先附上之前的一般函式的範例吧,
下為Day21示範的範例*(Day21-TypeScript(TS)的函式(Function) Part1)*,

function add(x: number, y: number): number {
    return x + y;
}

接著將參數y定義為選擇性參數
表示在呼叫這個函式時可傳入也可不傳入此參數,
也相對的,
判斷就會放在函式內,
如下,

function add(x: number, y?: number): number {
    if (typeof y !== 'undefined') {
        return x + y;
    } else {
        return x;
    }
}

以上面的範例來說,
若是參要判斷參數y究竟有沒有被傳進來,
那麼函式內就可以用typeof y !== 'undefined'判斷式,
會回傳布林值
以此判斷後,
在決定傳出的函示。

若是沒經過判斷,
直接將數字值x加上undefined的y
便會得到NaN的結果,
代表無效的數值運算
因此我們還是需要加上判斷式來避免這個情況發生。

在使用上的範例如下,

let i = 10;
let j = 20;
let r1 = add(i, j); // 10+20=30
let r2 = add(i); // 10
console.log(r1, r2); // 30 20 

也就是一般呼叫函式的方式,
差別在於多了個選擇性參數
讓這函式變得更有彈性。

今日結語

今天把過去學的東西合併在一起來使用,
用比較基礎的舉例相信大家也都能理解,
那麼今天也要精神喊話一下,
大家加油喔。


上一篇
Day22-TypeScript(TS)的函式(Function) Part2
下一篇
Day24-TypeScript(TS)函式(Function)的預設參數(Default Parameter)
系列文
從新手開始TypeScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言